<template>
	<view class="page my_reservation_page">
		<patient @info="getPatientId"></patient>
		<view class="type_list">
			<view class="type" :class="{'active':chooseTab.value == item.value}" v-for="item in typeTabs" :key="item.value"
				@click="getTab(item)">
				{{item.name}}
			</view>
		</view>
		<view class="reservation_list" v-if="list.length>0">
			<view class="card reservation_item" v-for="item in list" :key="item.id"
				@click="gotoPage(`/pagesCommon/reservation/reservationDetails?id=${item.id}`)">
				<doctorInfo :item="{
					avatar:item.doctorAvatar,
					name:item.doctorName,
					titleName:item.titleName,
					departName:item.departName,
					levelName:item.hospitalLevelName,
					hospitalName:item.hospitalName
				}"></doctorInfo>
				<view class="item_text">
					<view class="title">
						预约时间:
					</view>
					<view class="text">
						{{$getDate(item.appointTime || 0)}} <span class="tips">2天后</span>
					</view>
				</view>
				<view class="item_text">
					<view class="title">
						就诊地址:
					</view>
					<view class="text">
						{{item.adress || ''}}
					</view>
				</view>
				<view class="item_more">
					<view class="date">
						{{$getDate(item.createTime)}}
					</view>
					<view class="more">
						查看详情
						<uni-icons class="icon" type="right" size="12" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="no_thing" v-else>
			<image class="placeholder" src="@/static/images/noting.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		queryMyAppointList
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'
	export default {
		name: '',
		data() {
			return {
				list: [],
				total: 0,
				queryForm: {
					pageNo: 1,
					pageSize: 10,
					patientId: getUserInfo().id,
					status: 0
				},
				typeTabs: [{
					name: '待确认',
					value: 0
				}, {
					name: '待就诊',
					value: 1
				}, {
					name: '已失效',
					value: 2
				}, {
					name: '已回绝',
					value: 3
				}],
				chooseTab: {
					name: '待就诊',
					value: 0
				}
			}
		},
		onLoad() {},
		methods: {
			getTab(item) {
				this.chooseTab = item
				this.queryForm.status = item.value
				this.pageNo = 1
				this.queryMyAppointList()
			},
			getPatientId(value) {
				this.queryForm.patientId = value.id
				this.queryMyAppointList()
			},
			queryMyAppointList() {
				queryMyAppointList(this.queryForm).then(res => {
					this.list = res.data
					this.total = res.total
				}).catch(err => {
					console.log(err)
				})
			},
			gotoPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes fillWidth {
		0% {
			width: 0%;
		}

		100% {
			width: 55%;
		}
	}

	.my_reservation_page {
		.type_list {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.type {
				font-size: 32rpx;
				color: #333333;

				&.active {
					position: relative;
					font-weight: bold;
					color: #3C6DFE;

					&::after {
						content: "";
						position: absolute;
						left: 50%;
						bottom: -20rpx;
						transform: translate(-50%, -50%);
						width: 55%;
						height: 8rpx;
						border-radius: 100rpx;
						background-color: #3C6DFE;
						animation: fillWidth 0.25s ease;
						animation-fill-mode: forwards;
					}
				}
			}
		}

		.reservation_list {
			.reservation_item {
				margin: 30rpx 0;

				.item_text {
					margin: 15rpx 0;
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.title {
						flex: 0 0 120rpx;
						color: #999999;
					}

					.text {
						margin-left: 20rpx;

						.tips {
							display: inline-block;
							padding: 6rpx 15rpx;
							margin-left: 15rpx;
							color: #3E6EFE;
							border: 1px solid #3E6EFE;
							border-radius: 10rpx;
							font-size: 22rpx;
						}
					}

					.content {
						margin-left: 20rpx;
						background: #F8FAFB;
						border-radius: 10rpx;
						padding: 20rpx 10rpx;
					}
				}

				.item_more {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}
</style>